<template>
  <div>
    <Title title="权限列表"></Title>
    <SearchForm @todochange="changeSome"></SearchForm>
    <el-row>
      <el-col :span="22">
        <el-table :data="roleList" border style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          ></el-table-column>
          <el-table-column width="100" label="权限名称" align="center">
            <template #default="scope">
              <span> {{ scope.row.label }}</span>
            </template>
          </el-table-column>
          <el-table-column width="100" label="权限价值" align="center">
            <template #default="scope">
              <span> {{ scope.row.value }}</span>
            </template>
          </el-table-column>
          <el-table-column label="权限属性" align="center" width="100">
            <template #default="scope">
              <el-tag :color="scope.row.color"> {{ scope.row.color }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="ID" align="center">
            <template #default="scope">
              <el-tag>{{ scope.row._id }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-popconfirm
                confirm-button-text="Yes"
                cancel-button-text="No"
                :icon="InfoFilled"
                icon-color="#626AEF"
                @confirm="confirmDelOne(scope.row, scope.$index)"
                title="你确定要删除吗?"
              >
                <template #reference>
                  <el-button type="danger" size="small">删除</el-button>
                </template>
              </el-popconfirm>

              <el-button
                size="small"
                @click="updateOne(scope.row, scope.$index)"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <DialogForm
      :form="form"
      :rules="rules"
      ref="dialogRef"
      :comfirmChange="comfirmChange"
    >
      <el-form-item label="权限名称" prop="label">
        <el-input
          clearable
          v-model="form.label"
          placeholder="权限名称"
          type="text"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="权限价值" prop="value">
        <el-input
          clearable
          v-model="form.value"
          placeholder="权限价值"
          type="text"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="权限属性" prop="color">
        <el-input
          clearable
          v-model="form.color"
          placeholder="权限属性"
          type="color"
          autocomplete="off"
        />
      </el-form-item>
    </DialogForm>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import SearchForm from "@/components/SearchForm.vue";
import { Ajax } from "../../api";
import { InfoFilled } from "@element-plus/icons-vue";
import DialogForm from "@/components/DialogForm.vue";
const roleList = ref<any>([]);
const form = ref<any>({}); //传给子组件的值
const dialogRef = ref<any>(); //子组件实例
const changeSome = (v: any) => {
  //v是子传给父的keyword
  getRoleList(v);
};
const confirmDelOne = async (item: any, index: any) => {
  let res: any = await Ajax.roledelete({ _id: item._id });
  if (res.code == 200) {
    roleList.value.splice(index, 1);
  }
};
const updateOne = (item: any, index: any) => {
  dialogRef.value.showDialog(); //弹框展示
  form.value = Object.assign({}, item); //给弹框传值。这三种方式都可以
//   form.value = item; 
//   form.value = {...item}; 
};
const comfirmChange = async () => {
  //父组件定义一个修改自己的方法，传给子组件，让子组件修改自己
  let res: any = await Ajax.roleupdate(form.value);
  if (res.code == 200) {
    dialogRef.value.handleClose();
    getRoleList(); //刷新视图
  }
};
const rules = reactive({
  label: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  value: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
    {
      pattern: new RegExp("^[0-9]*[1-9][0-9]*$"), // 整数
      message: "必须是整数",
      trigger: "blur",
    },
  ],
  color: [
    {
      required: true,
      message: "请选择",
      trigger: "blur",
    },
  ],
});
const getRoleList = async (payload?: any) => {
  //请求角色列表不用pinia方法和数据。因为头部依赖pinia的数据，可能导致头部没数据。问号，参数可传可不传
  let res: any = await Ajax.getrolelist(payload);
  roleList.value = res.result;
};
onMounted(() => {
  getRoleList();
});
</script>

<style></style>
